//基础组件库
export default [
  {
    label: "文本",
    type: "text",
    icon: "learun-icon-text-single",

    config: {
      display: true,
      top: 0,
      left: 0,
      width: 100,
      height: 12,
      zIndex: 10,
      isHeader: false,

      table: "learun_type_text",
      field: "",
      content: "我是一条文本",

      title: "",
      fontFamily: "微软雅黑",
      fontSize: 12, // 小四
      writingMode: "",
      fontWeight: "normal",
      fontStyle: "", // 斜体
      textDecoration: "",
      textAlign: "left",

      letterSpacing: undefined,
      lineHeight: 12,
      paddingBottom: undefined,

      opacity: 100,

      isTextColor: "1",
      textColor: "#000",

      isBackgroundColor: "1",
      backgroundColor: "",

      isTextShadow: "1",
      textShadowColor: "",
    },

    getHtml(config) {
      let label = config.content;
      if (config.table != "learun_type_text") {
        if (config._data) {
          label = config._data[config.field] || "";
        } else {
          label = "";
        }
      }

      if (config.title) {
        label = `${config.title}：${label}`;
      }

      const html = `
      <div class="page-item"
        style="
          top:${config._top}pt;
          left:${config._left}pt;
          height:${config._height}pt;
          width:${config._width}pt;
          z-index:${config.zIndex};
          font-family:${config.fontFamily};
          font-size:${config.fontSize}pt;
          writing-mode:${config.writingMode};
          font-weight:${config.fontWeight};
          font-style:${config.fontStyle};
          text-decoration:${config.textDecoration};
          text-align:${config.textAlign};
          letter-spacing:${config.letterSpacing}pt;
          line-height:${
            config.lineHeight > config._height
              ? config._height
              : config.lineHeight
          }pt;
          padding-bottom:${config.paragraphSpacing}pt;
          opacity:${config.opacity / 100};
          color:${config.isTextColor == "1" ? config.textColor : "#000"}
          backgroundColor:${
            config.isBackgroundColor == "1" && config.backgroundColor
              ? config.backgroundColor
              : "rgba(0,0,0,0)"
          };
          ${
            this.config.isTextShadow == "1" && this.config.textShadowColor
              ? "-webkit-text-stroke:2pt" + this.config.textShadowColor
              : ""
          };
          
        "
      >${label}</div>`;
      return html;
    },
  },

  {
    label: "二维码",
    type: "barcode",
    icon: "learun-icon-bar-code",
    config: {
      display: true,
      top: 0,
      left: 0,
      width: 80,
      height: 80,
      zIndex: 9,
      isHeader: false,

      table: "learun_type_text",
      field: "",
      content: "123456789012",

      barcodeType: "qr", // 条码类型
      opacity: 100,

      isColor: "1",
      color: "#000",

      isBackgroundColor: "1",
      backgroundColor: "#fff",

      borderLine: "solid",
      borderSize: 0,
      borderColor: "",
      bordeRadius: 0,
      displayValue: true,
      fontOptions: "",
      textAlign: "left",
      textPosition: "bottom",
    },

    async getHtml(config, isPreview) {
      let label = config.content;
      if (config.table != "learun_type_text") {
        if (config._data) {
          label = config._data[config.field] || "";
        } else {
          label = "";
        }

        if (label == "" && isPreview) {
          label = config.content;
        }
      }

      const options = {
        margin: 0,
        width: 2,
        height: window.$toPx(config._height - config._height * 0.16),
        correctLevel:3,
        size:
          config._width < config._height
            ? window.$toPx(config._width - config.borderSize * 2)
            : window.$toPx(config._height - config.borderSize * 2),
        background:
          config.isBackgroundColor == "1" && config.backgroundColor
            ? config.backgroundColor
            : undefined,
        color:
          config.isColor == "1" && config.color
            ? config.color
            : "rgba(0,0,0,1)",
        displayValue: config.displayValue,
        fontOptions: config.displayValue ? config.fontOptions : '',
        textAlign: config.displayValue ? config.textAlign : "left",
        textPosition: config.displayValue ? config.textPosition : "bottom",
      };
      if(options.size < 200){
        options.size = 200;
      }
      
      const codeImg = await window.$getBarcodeImg(
        label,
        config.barcodeType,
        options
      );

      const border =
        config.borderSize <= 0
          ? ""
          : `border:${config.borderSize}pt ${config.borderLine} ${config.borderColor};`;

      let img = "";
      if (config.barcodeType == "qr") {
        const size=config._width < config._height?config._width - config.borderSize * 2:config._height - config.borderSize * 2;

        img = `<img style="
        ${border}
        border-radius:${config.bordeRadius}pt;
        width:${size}pt;"
        src="${codeImg}" />`;
      } else {
        img = `<img style="width:100%;height:100%" src="${codeImg}" />`;
      }
      const html = `
      <div class="page-item"
        style="
          top:${config._top}pt;
          left:${config._left}pt;
          height:${config._height}pt;
          width:${config._width}pt;
          z-index:${config.zIndex};
          opacity:${config.opacity / 100};
          ${config.barcodeType == "qr" ? "" : border}
          border-radius:${
            config.barcodeType == "qr" ? 0 : config.bordeRadius
          }pt;
        "
      >
        ${img}
      </div>`;
      return html;
    },
  },
  {
    label: "表格",
    type: "table",
    icon: "learun-icon-form",

    config: {
      display: true,
      top: 0,
      left: 0,
      width: 200,
      height: 62,
      zIndex: 8,

      table: "",
      columns: [
        {
          label: "第一列",
          prop: "",
          width: 100,
          align: "center",
          fontSize: 12,
          fontWeight: "normal",
          color: "",
          backgroundColor: "",
        },
        {
          label: "第二列",
          prop: "",
          width: 100,
          align: "center",
          fontSize: 12,
          fontWeight: "normal",
          color: "",
          backgroundColor: "",
        },
      ],
      fontFamily: "微软雅黑",
      color: "#000",
      rowHeight: 20,

      thColor: "",
      thFontWeight: "normal",
      thFontSize: 12, // 小四
      thBackgroundColor: "#f6f8fa",
      thHeight: 20,

      borderLine: "solid",
      borderSize: 1,
      borderColor: "#000",

      opacity: 100,
      isBackgroundColor: "",
      backgroundColor: "",

      components: "", // 关联组件,这些组件会随着表格位置的变化而变化
    },

    getHtml(config) {
      const border =
        config.borderSize <= 0
          ? ""
          : `border:${config.borderSize}pt ${config.borderLine} ${config.borderColor};`;
      let thHtml = "";
      if (config._isth) {
        for (let col of config.columns) {
          thHtml += `<td
            width="${col.width}"
            align="${col.align}"
            style="
              font-weight: ${config.thFontWeight};
              height:${config.thHeight}pt;
              ${border}
            "
          >${col.label}</td>`;
        }
      }
      let rowHtml = "";
      for (let row of config._data) {
        rowHtml += "<tr>";
        for (let col of config.columns) {
          rowHtml += `<td
              width="${col.width}"
              color="${col.color}"
              align="${col.align}"
              style="
                color:${col.color};
                font-weight: ${col.fontWeight};
                font-size: ${col.fontSize}pt;
                height:${config.rowHeight}pt;
                background-color:${
                  col.backgroundColor ? col.backgroundColor : "rgba(0,0,0,0)"
                };
                ${border}
              "
            >${row[col.prop] || ""}</td>`;
        }
        rowHtml += "</tr>";
      }

      const html = `
      <div class="page-item"
        style="
          top:${config._top}pt;
          left:${config._left}pt;
          width:${config._width}pt;
          z-index:${config.zIndex};
          opacity:${config.opacity / 100};
        "
      >
        <table
          :color="${config.color}"
          width="100%"
          style="
            border-collapse:collapse;
            border-spacing:0;
            font-family:${config.fontFamily};
            color: ${config.color};
            background-color:
              ${
                config.isBackgroundColor == "1" && config.backgroundColor
                  ? config.backgroundColor
                  : "rgba(0,0,0,0)"
              };
          "
        >
          <thead><tr style="
            color: ${config.thColor};
            font-size: ${config.thFontSize}pt;
            background-color:${
              config.thBackgroundColor
                ? config.thBackgroundColor
                : "rgba(0,0,0,0)"
            };
          ">
            ${thHtml}
          </tr></thead>
          <tbody>
            ${rowHtml}
          </tbody>
        </table>
      </div>`;
      return html;
    },
  },
  {
    label: "图片",
    type: "img",
    icon: "learun-icon-pic",
    config: {
      display: true,
      top: 0,
      left: 0,
      width: 160,
      height: 80,
      zIndex: 6,
      isHeader: false,

      backgroundImg: "",

      opacity: 100,

      isBackgroundColor: "1",
      backgroundColor: "",

      borderLine: "solid",
      borderSize: 0,
      borderColor: "",
      bordeRadius: 0,
    },

    getHtml(config) {
      const border =
        config.borderSize <= 0
          ? ""
          : `border:${config.borderSize}pt ${config.borderLine} ${config.borderColor};`;
      let dataURL = `${config._apiUrl}system/annexesfile/${config.backgroundImg}?token=${config._token}`;
      let img = `<img draggable="false" style="width:100%;height:100%" src="${dataURL}" />`;
      const html = `
      <div class="page-item"
        style="
          top:${config._top}pt;
          left:${config._left}pt;
          height:${config._height}pt;
          width:${config._width}pt;
          z-index:${config.zIndex};

          opacity:${config.opacity / 100};
          backgroundColor:
          ${
            config.isBackgroundColor == "1" && config.backgroundColor
              ? config.backgroundColor
              : "rgba(0,0,0,0)"
          };
          ${border}
          border-radius:${config.bordeRadius}pt;
        "
      >
        ${img}
      </div>`;
      return new Promise((resolve) => {
        let imgObj = new Image();
        imgObj.src = dataURL;
        imgObj.onload = () => {
          resolve(html);
        };
        imgObj.onerror = () => {
          resolve(html);
        };
      });
    },
  },
  {
    label: "直线",
    type: "line",
    icon: "learun-icon-minus",
    config: {
      display: true,
      top: 0,
      left: 0,
      width: 100,
      height: 1,
      zIndex: 7,
      isHeader: false,

      borderLine: "solid",
      borderColor: "#000",
      bordeRadius: 0,

      rotate: 0,
      opacity: 100,
    },

    async getHtml(config) {
      const border = `border-bottom:${config._height}pt ${config.borderLine} ${config.borderColor};`;

      const html = `
      <div class="page-item"
        style="
          top:${config._top}pt;
          left:${config._left}pt;
          width:${config._width}pt;
          z-index:${config.zIndex};

          transition-property:all;
          transform:rotateX(0deg) rotateY(0deg) rotateZ(${config.rotate}deg);
          opacity:${config.opacity / 100};
          ${border}
          border-radius:${config.bordeRadius}pt;
        "
      >
      </div>`;

      return html;
    },
  },
];
